<template>
  <section>
    <Header />
    <Layout />
    <Footer />
    
    <img
      v-if="showBackBtn"
      :src="BackTop"
      class="back"
      @click="backTopHandler"
    >
  </section>
</template>
<script>
import arkever from 'arkever'
import Header from './components/Header'
import Layout from './components/Layout'
import Footer from './components/Footer'
import BackTop from '@/assets/img/svg/backtop.svg'
export default {
  name: 'INDEX',
  components: {
    Header,
    Layout,
    Footer
  },
  data () {
    return {
      BackTop,
      showBackBtn: false
    }
  },
  mounted () {
    this.scrollLister()
  },
  methods: {
    scrollLister () {
      window.addEventListener('scroll', this.scrollFn)
      this.$once('hook:beforeDestroy', function () {
        window.removeEventListener('scroll', this.scrollFn)
      })
    },
    scrollFn: arkever.throttle(function () {
      this.showBackBtn = (window.scrollY || document.body.scrollTop || document.documentElement.scrollTop) > 80
    }, 100),
    backTopHandler () {
      window.scrollY = document.body.scrollTop = document.documentElement.scrollTop = 0
      window.scrollTo(0, 0)
    }
  }
}
</script>
<style lang="less" scoped>
section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .back {
    position: fixed;
    right: 8px;
    bottom: 40px;
    width: 36px;
    height: 36px;
  }
}
</style>
